<template>
  <div class="asideBar">
    <div class="catalog">
      <catalog></catalog>
    </div>
    <div class="setting">
      <setting @updateIsDay="getIsDay" @saveSettings="handleSaveSettings"></setting>
    </div>
    <div class="bookmark">
      <bookmark></bookmark>
    </div>
    <div class="highLight">
      <height-light
          @highlightSelection="highlightSelection"
          @removeHighlights="removeHighlights"
          @removeSelectedHighlight="removeSelectedHighlight"
          @updateHighlightColor="updateHighlightColor">
      </height-light>
    </div>
<!--    <div class="annotation">-->
<!--      <Annotation @addAnnotation="addAnnotation"></Annotation>-->
<!--    </div>-->
    <div class="toTop" v-show="y>100">
      <toTop></toTop>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Catalog from "@/views/Reader/components/asideBar/catalog.vue";
import Setting from "@/views/Reader/components/asideBar/setting.vue";
import toTop from "@/views/Reader/components/asideBar/toTop.vue"
import bookmark from "@/views/Reader/components/asideBar/bookmark.vue"
import HeightLight from "@/views/Reader/components/asideBar/highLight.vue";
import {useScroll} from "@vueuse/core";
import Annotation from "@/views/Reader/components/asideBar/annotation.vue";
const { y } = useScroll(window);
const emit = defineEmits(['highlightSelection', 'removeHighlights', 'removeSelectedHighlight','addAnnotation','saveSettings']);
const highlightColor = ref()
const highlightSelection = () => {
  console.log("highlightSelection is called asideBar")
  emit('highlightSelection');
};

const removeHighlights = () => {
  emit('removeHighlights');
};

const removeSelectedHighlight = () => {
  emit('removeSelectedHighlight');
};

const updateHighlightColor = (value) => {
  emit('updateHighlightColor',value)
}
const addAnnotation = () => {
  emit('addAnnotation')
}
const getIsDay = (value) => {
  emit('updateIsDay', value);
  console.log(value.value);
};
const handleSaveSettings = (settings) => {
  console.log('Saved settings:', settings);
  // 在这里处理保存的设置，例如将它们存储到父组件的状态或发送到服务器
  emit('saveSettings',settings)
};
</script>

<style scoped>
.catalog {
  margin: 200px 0 10px 10px;
}

.setting {
  margin: 10px 0 10px 10px;
}

.highLight {
  margin: 10px 0 10px 10px;
}

.toTop {
  margin: 10px 0 10px 10px;
}

.bookmark {
  margin: 10px 0 10px 10px;
}
.annotation{
  margin: 10px 0 10px 10px;
}
</style>